<template>
  <div>
    <div class="content">
      <div class="soundmark">
        <!-- <span>Bb [bi:] &nbsp;</span>
                        <img src="../../../assets/img/naturalSpell/play.png" alt=""> -->
        点击
        <img src="~@/assets/img/naturalSpell/play.png" alt="">
        听读音
      </div>
      <div class="demo">
        <img v-if="wordData.word_picture_vo_list[0].url" class="topic" :src="wordData.word_picture_vo_list[0].url" alt="">
        <div class="soundmark_content">
          <span class="soundmark_demo">{{wordData.name+"["+ wordData.phonetic +"]"}}</span>
          <AudioPlay class="fr click" ref="audioPlay" :type="6" :audioSrc="baseURL + wordData.audioURL"
            @onIsPlay="onIsPlayWord"></AudioPlay>
        </div>
        <div v-if="isCheckedFirst">
          <p class="word_text" v-for="(item, index) in wordData.paraphrase" :key="index">
            {{ item }}
          </p>
        </div>
      </div>
      <div v-if="!isCheckedFalse && !isCheckedFirst" class="btn_group">
        <div class="btn_yes" @click="
          isCheckedFirst = true;
        closeTimer();">
          <img src="~@/assets/img/naturalSpell/yes.png" alt="">
        </div>
        <div class="btn_no" @click="checkTrueFun(false)">
          <img src="~@/assets/img/naturalSpell/no.png" alt="">
        </div>
      </div>
      <div class="btn_group" v-if="!isCheckedFalse && isCheckedFirst">
        <div class="btn_yes" @click="checkTrueFun(true)">
          <img src="~@/assets/img/naturalSpell/yes.png" alt="" />
        </div>
        <div class="btn_no" @click="checkTrueFun(false)">
          <img src="~@/assets/img/naturalSpell/no.png" alt="" />
        </div>
      </div>
      <div @click="countDownFun" class="btn_group" v-if="isCheckedFalse">
        <div class="number">
          <img v-if="countDown==0" src="~@/assets/img/naturalSpell/next.png" alt="">
          <div v-else>
            <span class="text">{{ countDown }}</span>
            <img src="~@/assets/img/naturalSpell/btn.png" alt="">
          </div>
        </div>
      </div>
      <div class="footer" v-if="isCheckedFirst &&
        wordData.exampleList &&
        wordData.exampleList.length > 0
        ">
        <div style="width: 300px;">
          <label>例句</label>
          <div class="word-example-list">
            <div class="text">
              <p class="example-text">
                {{ wordData.exampleList[0].example_name }}
                <AudioPlay class="ml10 click" ref="exampleAudio" :type="6" :audioSrc="'https://tts.baidu.com/text2audio?cuid=baike&lan=ZH&ctp=1&pdt=301&rate=32&per=0&tex=' +
                  wordData.exampleList[0].example_name
                  " v-if="false"></AudioPlay>

              </p>
              <p>{{ wordData.exampleList[0].translate }}</p>
            </div>
            <div style="cursor: pointer;" v-if="wordData.exampleList.length > 1" @click="dialogExampleVisible = true">
              查看更多例句>>
            </div>
          </div>
        </div>
        <!-- <div class="footer">
      <div class="text">
        <P>例句: The teddybearwas his favourite plaything. </P>
        <p>软毛玩具熊是他最心爱的玩具</p>
      </div>
      <div class="img">
        <img src="../../../assets/img/naturalSpell/play.png" alt="">
      </div>
    </div> -->
      </div>
    </div>


    <el-dialog title="例句" :visible.sync="dialogExampleVisible">
      <div class="word-example-list">
        <div class="pb20" v-for="(example, index) in wordData.exampleList" :key="example.id">
          <p class="example-text">
            <span> {{ example.example_name }}</span>
            <!-- <img
              class="ml15 click"
              @click="playArrayAudio('exampleAudio' + index)"
              src="../assets/img/icon-audio-or.png"
              alt=""
            /> -->
            <AudioPlay class="ml10 click" :ref="'exampleAudio' + index" :type="2" :audioSrc="'https://tts.baidu.com/text2audio?cuid=baike&lan=ZH&ctp=1&pdt=301&rate=32&per=0&tex=' +
              example.example_name
              " v-if="false"></AudioPlay>
          </p>
          <p>{{ example.translate }}</p>
          <!-- <audio
            :ref="'exampleAudio' + index"
            :src="
              'https://tts.baidu.com/text2audio?lan=en&ie=UTF-8&spd=4&text=' +
              example.example_name
            "
          ></audio> -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
/**
 *    item.id = item.word_id; //ID
      item.name = item.word_name; //单词
      item.phonetic = item.phonetic_american; //音标
      item.imgURL = ""; //图片
      item.exampleList = []; //例句
      item.audioURL = item.us_url; //音频
      paraphrase//释义
 */
import AudioPlay from "@/components/AudioPlay";
import { throttle } from "@/utils/utils";
export default {
  name: "studyWord",
  data() {
    return {
      isCheckedFalse: false,
      isCheckedFirst: false,
      dialogExampleVisible: false,
      countDown: 2,
      isPlay: false,
    };
  },
  methods: {
    onIsPlayWord(isPlay) {
      this.isPlay = isPlay;
    },
    playAudio(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].playAudio();
      }
    },
    closeTimer() {
      this.$emit("closeTimer");
    },
    playArrayAudio(refName) {
      this.$pauseAllAudio();
      if (this.$refs[refName] && this.$refs[refName][0]) {
        this.$refs[refName][0].play();
      }
    },
    nextWord() {
      this.$emit("checkFalseFun", this.wordData.checkedAnswer, () => {
        this.$emit("nextWord");
      });
    },
    initCompon() {
      this.isCheckedFalse = false;
      this.isCheckedFirst = false;
      this.countDown = 2;
    },
    // checkFalseFun: throttle(function () {
    //   this.isCheckedFirst = true;
    //   this.isCheckedFalse = true;
    //   this.wordData.checkedAnswer = false;
    //   // this.$emit("checkFalseFun", false);
    // }, 2000),
    checkTrueFun: throttle(function (checkedAnswer) {
      if (checkedAnswer) {
        this.wordData.checkedAnswer = true;
        this.nextWord();
      } else {
        this.isCheckedFirst = true;
        this.isCheckedFalse = true;
        this.wordData.checkedAnswer = false;
      }
    }, 2000),

    countDownFun: throttle(function () {
      if (this.countDown > 0) {
        this.countDown--;
        this.playAudio("audioPlay");
      } else {
        this.nextWord();
      }
    }, 2000),
  },
  components: {
    AudioPlay,
  },
  created() {
    this.initCompon();
    console.log(this.wordData, "wordData.phonetic");
  },
  mounted() { },
  props: {
    wordData: {
      type: Object,
    },
    category: {
      type: Number,
    },
  },
  watch: {
    wordData() {
      this.initCompon();
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  position: relative;
  margin: 19px auto 0;
  width: 954px;
  height: 487px;
  display: flex;

  .soundmark {
    width: 230px;
    padding: 53px 0 0 92px;
    font-size: 14px;
    font-weight: 400;
    color: #6B5131;

    img {
      width: 24px;
      height: 21px;
    }
  }

  .demo {
    flex: 1;
    padding-top: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .topic {
      height: 145px;
    }

    .soundmark_content {
      padding: 21px 0 14px;
      font-size: 26px;
      font-weight: 400;
      color: #6B5131;

      .soundmark_demo {
        padding-right: 12px;
      }

      img {
        cursor: pointer;
        width: 38px;
        height: 33px;
      }
    }

    .word_text {
      font-size: 18px;
      font-weight: 400;
    }
  }

  .btn_group {
    text-align: right;
    width: 230px;
    height: 163px;
    padding-top: 200px;
    padding-right: 91px;

    .btn_no {
      cursor: pointer;
      margin-top: 17px;
    }

    img {
      cursor: pointer;
      width: 139px;
      height: 73px;
    }

    .number {
      position: relative;
      left: 0;
      top: 0;

      img {
        width: 76px;
        height: 77px;
        cursor: pointer;
      }

      .text {
        position: absolute;
        right: 32px;
        top: 20px;
        color: #ffff;
        font-size: 30px;
      }
    }

  }
}

.footer {
  position: absolute;
  bottom: 70px;
  left: 55px;
  // margin: 19px auto 0;
  // width: 954px;
  // display: flex;

  .text {
    // padding-left: 55px;
    font-size: 14px;
    font-weight: 400;
    color: #6B5131;
    line-height: 22px;
  }

  .img {
    img {
      cursor: pointer;
      width: 28px;
      height: 26px;
    }
  }
}
</style>